<template>
	<view>
		<!-- 顶部-话题榜 -->
		<view class="items">
			<view class="item">
				<navigator url="../pursue/pursue">
					<view class="item-x">
						追踪
					</view>
				</navigator>
				<navigator url="../topic1/topic1">
					<view class="item-x">
						<text class="item-xx">话题榜</text>
					</view>
				</navigator>
				<navigator url="../oppinions/oppinions">
					<view class="item-x">
						观点榜
					</view>
				</navigator>
				<image class="item-y" style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png" mode="">
				</image>
			</view>
		</view>
		<view class="bt"></view>
		<!-- 话题-1 -->
		<view class="ht">
			<view>
				<image src="../../../static/logo.png" class="a" mode=""></image>
			</view>
			<view class="hts">
				<view class="b">
					<text class="item-xx">
						曼联客场不败场次在英超排名第二,阿森纳27次客场不败
					</text>
				</view>
				<view class="c">
					曼联客场对阵阿斯顿维拉,这场比赛的结果对于现阶段的曼联来说影响并不是很大,但如果一旦曼联输球,
					他们的同城死敌曼城就将提前加冕本赛季的英超冠军.在这样的大背景下,曼联众将士自然是不愿意间接助攻死敌夺冠,
					因此在上半场落后的情况下,曼联在下半场发起了猛烈反扑,最终红魔以3-1的比分战胜了对手.
				</view>
				<view class="d">
					<view class="hotimage">
						<image class="img1" src="../../../static/logo.png" mode=""></image>
						<image class="img2" src="../../../static/logo.png" mode=""></image>
						<image class="img3" src="../../../static/logo.png" mode=""></image>
						<image class="img4" src="../../../static/logo.png" mode=""></image>
					</view>
					<!-- 新闻-1 -->
					<view class="hotimage-x">
						119观点
					</view>
				</view>
			</view>
		</view>

		<!-- 话题-2 -->
		<view class="ht">
			<view>
				<image src="../../../static/logo.png" class="a" mode=""></image>
			</view>
			<view class="hts">
				<view class="b">
					<text class="item-xx">
						#司机为救婴儿闯红灯#
					</text>
				</view>
				<view class="c">
					网红约司机为救婴儿连疮3次红灯,警察查实后取消处罚
				</view>
				<view class="d">
					<view class="hotimage">
						<image class="img1" src="../../../static/logo.png" mode=""></image>
						<image class="img2" src="../../../static/logo.png" mode=""></image>
						<image class="img3" src="../../../static/logo.png" mode=""></image>
						<image class="img4" src="../../../static/logo.png" mode=""></image>
					</view>
					<!-- 新闻-1 -->
					<view class="hotimage-x">
						1419观点
					</view>
					<view class="hotimage-y">
						热
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.hotimage {
		margin-right: 120rpx;
	}

	.hotimage-x {
		margin-right: 15rpx;
		font-size: 25rpx;
	}

	.hotimage image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
	}

	.hotimage .img1 {
		left: 20rpx;
	}

	.hotimage .img2 {
		left: 40rpx;
	}

	.hotimage .img3 {
		left: 60rpx;
	}

	.hotimage .img4 {
		left: 80rpx;
	}

	.hotimage .imgs {
		margin-left: 1000rpx;
	}

	.hotimage .img6 {
		margin-right: 700rpx;
	}

	.items {
		position: fixed;
		z-index: 1;
		background-color: #ffffff;
		width: 100%;
	}

	.bt {
		width: 100rpx;
		height: 70rpx;
	}

	.item {
		display: flex;
		flex-direction: row;
		margin: 5rpx 10rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		background-color: #ffffff;
	}

	.item-x {
		margin-right: 45rpx;
	}

	.item-y {
		margin-top: 10rpx;
		margin-left: 180rpx;
	}

	.hotimage-y {
		border: 1rpx solid #dd524d;
		width: 30rpx;
		text-align: center;
		color: #dd524d;
		border-radius: 10rpx;
		font-size: 17rpx;
		height: 32rpx;
	}

	.item-xx {
		font-weight: bold;
	}

	.ht {
		border-bottom: 1rpx solid #ccd0d9;
		margin-bottom: 12rpx;
	}

	.checkbox-item {
		color: #dd524d;
		width: 20rpx;
		height: 20rpx;
	}

	.hts {
		margin-left: 20rpx;
	}

	.c {
		margin-top: 13rpx;
	}

	.a {
		width: 30rpx;
		height: 30rpx;
		margin-top: 13rpx;
	}

	.d {
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		margin-top: 13rpx;
	}
</style>
